<template>
  <div class="con">
    <div class="contbox6_10">
      <p
        class="titlelist6_10 titles"
        style="box-shadow: none; position: fixed; z-index: 5"
      >
        权益管理
        <span style="color: #999; font-size: 16px"
          >&nbsp;&nbsp;
          <span style="font-size: 16px; color: #2f2c29">/</span>
          &nbsp;&nbsp; </span
        >权益列表&nbsp;&nbsp;
        <span style="font-size: 16px; color: #2f2c29">/</span>
        创建权益
      </p>
      <div class="content">
        <div class="contentTop">
          <div class="contentTopTitle">
            <div style="font-size: 14px">权益模版&nbsp;&nbsp;</div>
            <el-select
              v-model="tempUid"
              placeholder="请选择"
              :disabled="type"
              @change="quanChange"
            >
              <el-option
                v-for="item in options"
                :key="item.uid"
                :label="item.tempName"
                :value="item.uid"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="modelTitle" style="font-size: 16px">模版样式</div>
        <div class="modelCont">
          <div class="vipPicList" v-for="(item, index) in picList" :key="index">
            <img :src="item.imgUrl" style="width: 100%; height: 100%" alt="" />
          </div>
        </div>
        <div class="btnGroup">
          <el-button @click="cancel">取消</el-button>
          <el-button type="primary" @click="lastStep">上一步</el-button>
          <el-button type="primary" v-show="submitBool==false" @click="submit">完成</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      options: [],
      tempUid: "",
      picList: [],
      type: "",
      submitBool:false
    };
  },
  created() {
    this.getMenuList();
    console.log("vuex里面存储的数据");
    console.log(this.$store.state.powerInterestData);
    let queryData = sessionStorage.getItem("queryData");
    queryData = JSON.parse(queryData);
    if(queryData.status=="003"){
      this.submitBool = true
    }

    if (queryData.status == "001" || queryData.status=='002') {
      this.type = false;
    }else{
      this.type = true
    }
    if (queryData.callback) {
      this.tempUid = this.$store.state.powerInterestData.tempUid;
      this.getListPic();
    }
  },
  methods: {
    // 取消
    cancel() {
      this.$router.push({
        name: "vipList",
      });
    },
    quanChange() {
      this.getListPic();
    },
    // 获取图片
    getListPic() {
      axios
        .post("/api/temp/listPic", { relationId: this.tempUid })
        .then((res) => {
          console.log("获取的图片列表");
          console.log(res);
          this.picList = res.data.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 获取下拉菜单
    getMenuList() {
      axios
        .post("/api/temp/list", { tempType: "1" })
        .then((res) => {
          console.log("下拉菜单");
          this.options = res.data.data;
          console.log(this.options);
          let queryData = sessionStorage.getItem("queryData");
          queryData = JSON.parse(queryData);
          if (queryData.status == "001") {
            this.tempUid = this.options[0].uid;
            this.getListPic()
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    lastStep() {
      // alert(JSON.stringify(this.$route.query))
      let queryData = sessionStorage.getItem("queryData");
      queryData = JSON.parse(queryData);
      queryData.backOf = "001";
      // queryData.backOf = "001"
      this.$router.push({
        name: "interests",
        query: queryData,
      });
    },
    submit() {
      let data = this.$store.state.powerInterestData;
      data.tempUid = this.tempUid;
      axios
        .post("/api/rgt/edit", data)
        .then((res) => {
          // alert(res.data.code)
          if (res.data.code == "0000") {
            layer.open({
              content: res.data.msg,
              skin: "msg",
              time: 1, //1秒后自动关闭
            });
            setTimeout(() => {
              this.$router.push({
                name:"vipList"
              })
            }, 300);
          }else{
            layer.open({
              content: res.data.msg,
              skin: "msg",
              time: 1, //1秒后自动关闭
            });
          }
        })
        .catch((err) => {
          console.log(err);
          layer.open({
            content: res.data.msg,
            skin: "msg",
            time: 1, //1秒后自动关闭
          });
        });
    },
  },
};
</script>

<style scoped>
.modelCont {
  padding: 20px;
  display: flex;
  padding-top: 0;
  padding-left: 0;
  flex-wrap: wrap;
  box-sizing: border-box;
}
.content {
  padding-left: 30px;
}
.contentTopTitle {
  margin-top: 30px;
  display: flex;
  align-items: center;
}
.modelTitle {
  margin-top: 30px;
}
.vipPicList {
  width: 312px;
  height: 168px;
  margin-right: 20px;
  margin-top: 20px;
}
.btnGroup {
  display: flex;
  justify-content: center;
}
</style>